<template>
  <div class="sysm-b-rlsb boxsi pore-box" style="height: 681px;">
    <p class="text_ac sysm-brlsb-text"  v-if="showBoxIndex == 1">请办案警官完成人脸识别</p>
    <div class="sysm-boxrlsb-box">
      <div class="sysm-brbox-top clearfix">
        <div class="sysm-brbtop-left fl">
          <div
            :class="
                            showBoxIndex == 0 ? 'sysm-brbtleft-box': 
                            showBoxIndex == 1 ? 'sysm-brbtleft-box show-video': 
                            showBoxIndex == 2 ? 'sysm-brbtleft-box show-user' : 
                            showBoxIndex == 3 ? 'sysm-brbtleft-box show-info' : 'sysm-brbtleft-box show-nouser' "
          >
            <div class="sysm-brbtlbox-obj">
              <div
                style="height: 100%; width: 100%; overflow: hidden; border-radius: 50%; position: relative;"
              >
                <video id="video" width="363px" height="363px" autoplay="autoplay"></video>
              </div>
            </div>
            <div class="sysm-brbtlbox-load">连接设备中...</div>
            <div class="sysm-brbtlbox-user">
              <table width="100%" height="100%">
                <tr>
                  <td align="center">
                    <div
                      style="height: 100%; width: 100%; overflow: hidden; border-radius: 50%; position: relative;"
                    >
                      <!--<img
                        :src="faceStr"
                        width="363px"
                        height="363px"
                      />-->
                      <span>Hi</span> <br>   
                      <span>{{user.loginName}}</span> <br>   
                      <span>欢迎你</span> <br>   
                    </div>
                  </td>
                </tr>
              </table>
            </div>
            <div class="sysm-brbtlbox-nouser">
              <table width="100%" height="100%">
                <tr>
                  <td align="center">
                    <img
                        :src="imgPath"
                        width="363px"
                        height="363px"
                      />
                    <p class="text_ac errorTxt"></p>
                  </td>
                </tr>
              </table>
            </div>
            <div class="sysm-brbtlbox-info">
              <img :src="imgPath" alt />
            </div>
          </div>
        </div>
        <div class="sysm-brbtop-right fr">
          <div class="sysm-brbtright-box pl50" v-if="showBoxIndex == 3">
            <div class="sysm-brbtrbox-obj">
              <table width="100%" height="100%">
                <tr>
                  <th width="120" align="right">姓名：</th>
                  <td class="pt10 pb10">{{user.loginName}}</td>
                </tr>
                <tr>
                  <th align="right">警号：</th>
                  <td class="pt10 pb10">{{user.userCode}}</td>
                </tr>
                <tr>
                  <th align="right">性别：</th>
                  <td class="pt10 pb10">{{user.sex}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="sysm-brbox-bom text-ac pore-box" v-if="showBoxIndex > 1">
        <p class="sysm-brbbom-false" v-if="showBoxIndex == 4">{{errorTxt}}</p>
        <a href="javascript:;" v-if="showBoxIndex == 3" class="sysm-brbbom-btn" @click="doSave()">开始登记</a>
        <a href="javascript:;" class="sysm-brbbom-btn" @click="startFaceDetection()"> 重新识别</a>
      </div>
    </div>
  </div>
</template>
<script>
import {
  initDeviceInfos,
  openCamera,
  openvideo,
  faceStr
} from "@/views/modules/webModu/terminal/js/camera";
import {getShowImgPath} from '@/utils'
import {playSound} from '@/views/modules/webModu/terminal/js/playSound'
import { faceRecognition } from "@/views/modules/webModu/terminal/js/websocket";
import { playVideo } from "@/views/modules/webModu/terminal/js/main";
export default {
  data() {
    return {
      user: {},
      faceStr:'',
      imgPath: [],
      errorTxt:'',
      w: 480,
      h: 480,
      policeId:'',
      policeName:'',
      showBoxIndex: 0 //0为链接设备中。1为显示摄像头。2为检测到某位人员并显示欢迎文案.3为显示头像并左侧显示信息.4为未匹配带人员
    };
  },
  created() {
    this.$nextTick(() => {
      //this.initOpenCamera();
      this.facepassedCompleted(faceStr);
    });
    
  },
  methods: {
    toRouter(o) {
      this.vtp.toRouter(this, o);
    },
    doSave(){
      // this.$http({
      //     url: this.$http.adornUrl(
      //         "/zfuser/zfinvolvedregistration/doSaveInvolvedInfo"
      //     ),
      //     method: "post",
      //     data: this.$http.adornData(this.involvedInfo)
      // }).then(({ data }) =>{
      //     if(data&&data.code==0){
      //         this.toRouter('tjcg')
      //     }else{
      //         this.$message.error("系统异常，提交失败");
      //     }
      // })
      this.vtp.set("policeId", this.policeId);
      this.vtp.set("policeName", this.policeName);
      this.toRouter('sbry');
    },
    initOpenCamera(){
      this.showBoxIndex = 0; //链接设备中
      let _this = this;
      faceRecognition.connected(function(msg) {
        console.log("连接成功" + msg);
        _this.startFaceDetection();
      });
    },
    startFaceDetection() {
      let _this = this;
      _this.showBoxIndex = 1; //显示摄像头
      faceRecognition.startFaceDetection(this.w, this.h, function(msg) {
        console.log("显示摄像头画面:" + msg);
        playSound('/static/resource/jcrl.mp3');
        var videoElement = document.querySelector("video");
        playVideo(videoElement, function() {
          console.log("开启流");
          _this.startSnap();
        });
      });
    },
    startSnap() {
      let _this = this;
      faceRecognition.startSnap(this.w, this.h, "0", "", function(msg) {
        console.log("人脸抓拍:" + msg);
        var obj = JSON.parse(msg);
        if (obj.data) {
          var photo1 = obj.data.base64Data;
          _this.facepassedCompleted(photo1);
        }
      });
    },
    facepassedCompleted(photo1) {
      this.faceStr="data:image/jpeg;base64,"+photo1
      this.$http({
        url: this.$http.adornUrl(
          "/zfuser/zfinvolvedregistration/saveBase64Img"
        ),
        method: "post",
        data: this.$http.adornData({
          base64Str: photo1
        })
      }).then(({ data }) => {
        this.imgPath = getShowImgPath(data);
        this.$http({
          url: this.$http.adornUrl(
            "/zfuser/zfinvolvedregistration/doPipei"
          ),
          method: "get",
          params: this.$http.adornParams({
            imgPath: data,
            userType: "1"
          })
        }).then(({ data }) => {
          if (data && data.code==0) {
            this.showBoxIndex = 2; //欢迎文字
            let _this = this;
            setTimeout(function(){
               _this.showBoxIndex = 3; //识别成功
            },2000);
            this.user = data.user;
            this.getDicItemNameSimple(this.user,'sex','sex','sex')
            this.policeId=this.user.id;
            this.policeName=this.user.loginName;
          } else {
            this.showBoxIndex = 4; //未匹配带人员
            this.errorTxt = "未匹配到人员";
          }
        });
      });
    }
  }
};
</script>
